<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image class="avatar" src="https://picsum.photos/200/300" mode="aspectFill" />
        <view class="user-details">
          <view class="name-row">
            <text class="username">的不此次</text>
            <view class="vip-tag">VIP</view>
            <button class="buy-vip">未实名</button>
          </view>
          <text class="user-id">ID: 164163483</text>
        </view>
      </view>
      <view class="view-a">
        <view class="view-all">查看全部 ></view>
      </view>
      
      <!-- 订单状态图标 -->
      <view class="order-status">
        <view class="status-item" v-for="(item, index) in grid" :key="index">
          <text class="iconfont"><image
            :src=item.icon
            mode="scaleToFill"
          /></text>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 邀请好友卡片 -->
    <view class="invite-card">
      <text>邀请好友</text>
      <text class="go-invite">去邀请 ></text>
    </view>

    <!-- 我的资产 -->
    <view class="section-title">我的资产</view>
    <view class="assets-list">
      <view class="asset-item" v-for="(item, index) in section" :key="index">
        <text class="iconfont">
          <image
            :src=item.icon
            mode="scaleToFill"
          />
        </text>
        <text>{{ item.name }}</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 功能网格 -->
    <view class="grid-menu">
      <view class="grid-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
        <text class="iconfont">
          <image
            :src=item.icon
            mode="scaleToFill"
          />
        </text>
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      section:[
        { name: '我的积分', icon: '/static/img/integral.png' },
        { name: '我的金币', icon: '/static/img/金币.png' },
        { name: '我的团队', icon: '/static/img/人物-团队.png' },
      ],
      grid:[
      { icon: '/static/img/3.1待付款.png', name: '待付款' },
      { icon: '/static/img/待收货.png', name: '待发货' },
      { icon: '/static/img/待收货 (1).png', name: '待收货' },
      { icon: '/static/img/待评价 (1).png', name: '待评价' },
      { icon: '/static/img/退款售后.png', name: '退款售后' },
      ],
      menuItems: [
        { icon: '/static/img/购物车.png', name: '购物车' },
        { icon: '/static/img/订单管理.png', name: '订单管理' },
        { icon: '/static/img/地址管理.png', name: '地址管理' },
        { icon: '/static/img/安全管理.png', name: '安全管理' },
        { icon: '/static/img/客服.png', name: '联系客服' },
        { icon: '/static/img/微信公众号.png', name: '关注公众号' },
        { icon: '/static/img/退出.png', name: '退出登录' },
        { icon: '/static/img/邀请好友.png', name: '邀请好友' },
      ]
    }
  },
  methods: {
    handleMenuClick(item) {
      uni.showToast({
        title: `点击了${item.name}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style>
@import url(./my.css);
</style>

